<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
        .panel {
            width: 520px;
            height: 520px;
            margin: 0 auto;
            background-image: url("http://www.17sucai.com/preview/311610/2015-05-11/dazhuanpan/images/lotteryBg.jpg");
            position: relative;
            overflow: hidden;
        }

        .start {
            width: 125px;
            height: 125px;
            background-image: url("http://www.17sucai.com/preview/311610/2015-05-11/dazhuanpan/images/btn_start.png");
            border: none;
            outline: none;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -62px;
            margin-top: -62px;
            z-index: 2;
            cursor: pointer;
        }

        #run {
            width: 153px;
            height: 214px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -76px;
            margin-top: -107px;
            z-index: 1;
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div class="panel">
        <img id="run" src="http://www.17sucai.com/preview/311610/2015-05-11/dazhuanpan/images/start.png">
        <div id="btn_run" class="start">
        </div>
    </div>

</body>
<script>
    function rotate(r, callback) {
        var run = document.getElementById('run');
        // 计算所需要旋转的角度，先空转6圈再回到指定
        var deg = 360 * 6 + r * 60;

        // 清除之前的动画和样式，复位到初始角度
        run.style.transition = 'none';
        run.style.transform = 'rotate(0deg)';

        // 触发浏览器重绘
        setTimeout(function () {
            // 应用旋转动画到指定角度
            run.style.transition = 'transform 2s ease-out';
            run.style.transform = `rotate(${deg}deg)`;

            // 调用回调函数显示结果
            setTimeout(callback, 2000);
        }, 10);
    }

    function lottery() {
        var results = [
            '10元优惠券',
            '20元优惠券',
            '10元话费',
            '10元Q币',
            'iPhone 5s',
            '5元优惠券'
        ];
        var r = Math.floor(Math.random() * 6);

        rotate(r, function () {
            alert(results[r]);
            var btnRun = document.getElementById('btn_run');
            btnRun.disabled = false;
            btnRun.style.cursor = 'pointer';
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        var btnRun = document.getElementById('btn_run');

        btnRun.addEventListener('click', function () {
            btnRun.disabled = true;
            btnRun.style.cursor = 'default';
            lottery();
        });
    });
</script>

</html>